.fade-enter-active,
.fade-leave-active {
  transition: all  cubic-bezier(1, 0.5, 0.8, 1);
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.fadeUp-enter-active,
.fadeUp-leave-active {
  transition: all  cubic-bezier(1, 0.5, 0.8, 1);
}

.fadeUp-enter-from,
.fadeUp-leave-to {
  opacity: 0;
  transform: translate3d(0, 100%, 0);
}

.bounce-enter-active {
    animation: bounce-in 1s;
}
.bounce-leave-active {
    animation: bounce-in 1s reverse;
}

@keyframes bounce-in {
    0% {
      transform: scale(0);
    }
    50% {
      transform: scale(1.25);
    }
    100% {
      transform: scale(1);
    }
}




@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translate3d(-100%,0,0);
    }
    100% {
        opacity: 1;
        transform: translateZ(0);
    }
}

.fadeInTopLeft-enter-active {
    animation: fadeInTopLeft 1s;
}
.fadeInTopLeft-leave-active {
    animation: fadeInTopLeft 1s reverse;
}

@keyframes fadeInTopLeft {
    0% {
        opacity: 0;
        transform: translate3d(-100%,-100%,0);
    }
    100% {
        opacity: 1;
        transform: translateZ(0);
    }
}


.lightSpeedInRight-enter-active {
    animation: lightSpeedInRight 3s;
}
.lightSpeedInRight-leave-active {
    animation: lightSpeedInRight 3s reverse;
}

@keyframes lightSpeedInRight {
    0% {
        opacity: 0;
        transform: translate3d(100%,0,0) skewX(-30deg);
    }
    60% {
        opacity: 1;
        transform: skewX(20deg);
    }
    80% {
        transform: skewX(-5deg);
    }
    100% {
        transform: translateZ(0);
    }
}


.zoomIn-enter-active {
    animation: zoomIn 3s;
}
.zoomIn-leave-active {
    animation: zoomIn 3s reverse;
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale3d(.3,.3,.3);
    }
    50% {
        opacity: 1;
    }
}

.zoomInDown-enter-active {
    animation: zoomInDown 3s;
}
.zoomInDown-leave-active {
    animation: zoomInDown 3s reverse;
}

@keyframes zoomInDown {
    0% {
        animation-timing-function: cubic-bezier(.55,.055,.675,.19);
        opacity: 0;
        transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0);
    }
    60% {
        animation-timing-function: cubic-bezier(.175,.885,.32,1);
        opacity: 1;
        transform: scale3d(.475,.475,.475) translate3d(0,60px,0);
    }
}

.slideInDown-enter-active {
    animation: slideInDown 3s;
}
.slideInDown-leave-active {
    animation: slideInDown 3s reverse;
}

@keyframes slideInDown {
    0% {
        transform: translate3d(0,-100%,0);
        visibility: visible;
    }
    60% {
        transform: translateZ(0);
    }
}





